<template>
  <div class="similarity">
    <c-table :data="data" :columns="columns" size="small" :showHeader="false">
      <template v-slot:commodity="{ row }">
        <span>{{ row.categoryName }}</span>
        <a-divider type="vertical" />
        <span>{{ row.brand }} </span>
        <span>{{ row.spec }} </span>
        <span>{{ row.material }} </span>
      </template>
      <template v-slot:quotationDetailSalesState="{ row }">
        <TagsDetailStatus :flag="row" />
      </template>
      <template v-slot:price="{ row }">
        <Price :data="row" />
      </template>
      <template v-slot:handle="{ row }">
        <c-button type="link" @click="view(row)">查看</c-button>
      </template>
    </c-table>
  </div>
</template>

<script>
import TagsDetailStatus from "@/components-business/quotation/detailStatus";
import quotationDict from "@/dict/quotation";
import Price from "@/components-business/quotation/price";

export default {
  components: {
    TagsDetailStatus,
    Price
  },
  props: {
    // 报价信息
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      quotationDict,
      columns: [
        {
          title: "商品名称",
          scopedSlots: { customRender: "commodity" }
        },
        {
          title: "仓库",
          dataIndex: "warehouseName"
        },
        {
          title: "数量",
          dataIndex: "amountAvailable"
        },
        {
          title: "价格",
          scopedSlots: { customRender: "price" }
        },
        {
          title: "状态",
          dataIndex: "quotationDetailSalesState",
          scopedSlots: { customRender: "quotationDetailSalesState" }
        },
        {
          title: "供应商",
          dataIndex: "companyName"
        },
        {
          title: "操作",
          scopedSlots: { customRender: "handle" }
        }
      ]
    };
  },
  methods: {
    //  查看报价
    view(row) {
      this.$router.push({
        name: "spotmall-quotation",
        query: { id: row.quotationId, detailId: row.id }
      });
    }
  }
};
</script>
